<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中事件的绑定</title>
</head>
<body>

<!--
   v-on:click   绑定单击事件
-->
<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="change">改变大小写</button>
<!--    事件的简化写法-->
    <button @click="change">改变大小写</button>
</div>

<script src="../vue.js"></script>
<script>

    // 消除生产提示  有可能不生效  可以直接修改 vue.js
    Vue.config.productionTip=false

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
            number:20
        },
        methods:{
            change(){
                console.log(this)
                console.log(this.msg)  //   vm  vue实例对象  数据代理 msg  number
                this.msg = this.msg.toUpperCase()
            }
        }
    })

</script>
</body>
</html>